<template>
  <div class="dashboard-editor-container">
    <!-- 调度统计 -->
    <panel-group :group-data="panelGroupData"/>

    <el-row style="margin-bottom: 10px">
      <el-col :span="12">
        <div>调度报表</div>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-date-picker
          size="small"
          v-model="dateDuring"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          :default-time="['00:00:00','23:59:59']"
        >
        </el-date-picker>
        <el-button type="primary" size="small" @click="getScheduleInfo">查询</el-button>
      </el-col>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <!-- 折线图 -->
      <el-col :span="16">
        <div class="chart-wrapper">
          <line-chart :chart-data="lineChartData"/>
        </div>
      </el-col>
      <!-- 饼图 -->
      <el-col :span="8">
        <div class="chart-wrapper">
          <pie-chart :chart-data="pieCharData"/>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import PieChart from './components/PieChart'
import { getChartInfo, getDashboardInfo } from '@/api/xxlJob/dashboard'
import qs from 'qs'

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart,
    PieChart
  },
  data() {
    return {
      lineChartData: {
        successData: [],
        failData: [],
        runningData: [],
        lineCharDates: []
      },
      pieCharData: {
        jobSuccess: 0,
        jobFail: 0,
        jobRunning: 0
      },
      dateDuring: [],
      panelGroupData: {
        jbobLogCount: null,
        jobInfoCount: null,
        executorCount: null
      }
    }
  },
  beforeCreate() {

  },
  computed: {
    // 默认时间
    timeDefault() {
      let date = new Date()
      // 通过时间戳计算
      let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000 // 转化为时间戳
      let defalutEndTime = date.getTime()
      let startDateNs = new Date(defalutStartTime)
      let endDateNs = new Date(defalutEndTime)
      // 月，日 不够10补0
      defalutStartTime = startDateNs.getFullYear() +
        '-' + ((startDateNs.getMonth() + 1) >= 10 ? (startDateNs.getMonth() + 1) : '0' + (startDateNs.getMonth() + 1)) +
        '-' + (startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate()) + ' 00:00:00'
      defalutEndTime = endDateNs.getFullYear() + '-' +
        ((endDateNs.getMonth() + 1) >= 10 ? (endDateNs.getMonth() + 1) : '0' + (endDateNs.getMonth() + 1)) + '-' +
        (endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate()) + ' 23:59:59'
      return [defalutStartTime, defalutEndTime]
    }
  },
  created() {
    this.dateDuring = this.timeDefault
    this.getDashBoardInfo()
    this.getScheduleInfo()
  },
  methods: {
    getDashBoardInfo() {
      getDashboardInfo().then(res => {
        const {
          code, content: {
            jobInfoCount, jobLogCount, jobLogSuccessCount, executorCount
          }
        } = res
        if (res.code === 200) {
          this.panelGroupData.jobInfoCount = jobInfoCount
          this.panelGroupData.jobLogCount = jobLogCount
          this.panelGroupData.executorCount = executorCount
        }
      }).catch(function(err) {
        console.log(err.message)
      })
    },

    getScheduleInfo() {
      const timeScope = {
        startDate: this.dateDuring[0],
        endDate: this.dateDuring[1]
      }
      // console.info("timeScope.startDate:" + JSON.stringify(timeScope))

      getChartInfo(timeScope).then(res => {
        const {
          code, content: {
            triggerCountRunningTotal, triggerCountSucTotal, triggerCountFailTotal,
            triggerDayList, triggerDayCountRunningList, triggerDayCountFailList, triggerDayCountSucList
          }
        } = res
        if (res.code === 200) {
          // console.info("chart info data refresh")
          this.lineChartData.lineCharDates = triggerDayList
          this.lineChartData.successData = triggerDayCountSucList
          this.lineChartData.failData = triggerDayCountFailList
          this.lineChartData.runningData = triggerDayCountRunningList

          this.pieCharData.jobRunning = triggerCountRunningTotal
          this.pieCharData.jobSuccess = triggerCountSucTotal
          this.pieCharData.jobFail = triggerCountFailTotal
        }
      }).catch(function(err) {
        // console.log(err.message)
      })
      // console.info(JSON.stringify(this.pieCharData))
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" slot-scope>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .panel-group {
    margin-top: 0px;
  }
}
</style>
